<template>
  <div >
      <a-breadcrumb style="margin: 0px 0px 0px 0px">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>信息管理</a-breadcrumb-item>
          <a-breadcrumb-item>账号绑定</a-breadcrumb-item>
     </a-breadcrumb>
    <el-card style="margin-top:80px" shadow="hover">
  <el-row :gutter="20">
  <el-col :span="4">
  <div class="b">邮箱</div>
  </el-col>
  <el-col :span="10">
  <div>
  <el-input placeholder="请输入邮箱" type="adress" v-model="ruleForm.adress" autocomplete="off"></el-input>
  </div>
  </el-col>
  </el-row>
  <el-row :gutter="20">
  <el-col :span="4">
  <div class="b">密码</div>
  </el-col>
  <el-col :span="10">
  <div>
  <el-input placeholder="请输入密码" v-model="ruleForm.pass" show-password></el-input>
  </div>
  </el-col>
  </el-row>
    <el-row :gutter="20">
  <el-col :span="4">
  <div class="b">验证码</div>
  </el-col>
  <el-col :span="10">
  <div>
  <el-input placeholder="请输入验证码" v-model="ruleForm.ma" ></el-input>
  </div>
  </el-col>
  <el-col :span="8">
  <div>
  <!-- <el-input placeholder="请输入验证码" v-model="ruleForm.ma" show-password></el-input> -->
  <!-- <el-button>获取验证码</el-button> -->
    <button @click="getCode" id="d" class="getphone" v-show="show">获取验证码</button>
    <button class="blue" v-show="!show" disabled="disabled">{{count}}秒后重新发送</button>
  </div>
  </el-col>
  </el-row>
  <el-row>
    <el-col style="margin-left:300px"><el-button :plain="true" @click="open2">提交</el-button></el-col>
  </el-row>
</el-card>
  </div>
</template>


<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
         count: '',
        timer: null,
        show: true,

        ruleForm: {
          adress:'',
          pass: '',
          checkPass: '',
          ma: '',
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          adress: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getCode() {
      this.$message('验证码已发往您的邮箱，请及时查看');
      const num = 60;
      if (!this.timer) {
        this.count = num;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= num) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
                    }, 1000);
          }
                 },
                 open2() {
        this.$message({
          message: '恭喜你，绑定账号成功！',
          type: 'success'
        });
      },
    }
  }

 
</script>


<style lang="scss" scoped>
/* .text {
    font-size: 14px;
  } */

  /* .item {
    padding: 18px 0;
  } */

.el-card {
    border: 1px solid #EBEEF5;
   background-color: #f1f4f7;
     width: 480px;
    // background-color: #e5e9f2;
    margin-left: 300px;
    }

  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .a{
    font-size: 20px;
  }
  .b{
    margin-top:13px;
    font-size: 15px;
    /* background: #d3dce6; */
     border-radius: 4px;
      min-height: 36px;
  }
   
.getphone {
  display: block;
  height: 46px;
  font-size: 8px;
  color: #aaaaaa;
  border: 1px solid #e6e6e6;
  text-align: center;
  border-radius: 5px;
  background: white;
  box-sizing: border-box;
  padding:0 20px;
  line-height: 46px;
}
 
 
.blue {
  color: #508bef;
  display: block;
  height: 42px;
  line-height: 42px;
  font-size: 10px;
  text-align: center;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  box-sizing: border-box;
  padding:0 20px;
}
 
</style>
